<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-download" size="mini" @click="exportData" v-if="p2">导出
          </el-button>
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny" v-if="p4">删除</el-button>
        </div>
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="救援日期" label-width="70px">
              <el-date-picker
                v-model="value"
                type="daterange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateTimeChange"
                align="right"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="案件编号" label-width="70px">
              <el-input v-model="tableSearchParam.orderNo" style="width:150px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="救援公司" label-width="70px"
                          v-if="p">
              <el-input v-model="tableSearchParam.companyName" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="网络平台" label-width="70px">
              <el-select v-model="tableSearchParam.onlineCompanyId" placeholder="请选择" no-data-text="暂无数据"
                         style="width:200px" clearable>
                <el-option
                  v-for="item in allOnlineData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工单状态" label-width="70px">
              <el-select v-model="tableSearchParam.status" placeholder="请选择" no-data-text="暂无数据"
                         style="width:200px" clearable>
                <el-option key="0" label="接单出发" value="0"></el-option>
                <el-option key="1" label="接车出发" value="1"></el-option>
                <el-option key="2" label="到达目的地" value="2"></el-option>
                <el-option key="3" label="到达目的地" value="3"></el-option>
                <el-option key="4" label="工单完成" value="4">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="救援日期"
            property="createdTime"
            width="90">
          </el-table-column>
          <el-table-column
            label="案件编号"
            property="orderNo"
            width="100">
          </el-table-column>
          <el-table-column
            label="救援公司"
            property="rescueCompanyName"
            width="100">
          </el-table-column>
          <el-table-column
            label="来源网络平台"
            property="onlineServiceName"
            width="100">
          </el-table-column>
          <el-table-column
            label="接车照片"
            width="100">
            <template slot-scope="scope">
              <el-button
                @click="viewImages(scope.row.getCarImgs)">查看图片
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="到达照片"
            width="100">
            <template slot-scope="scope">
              <el-button
                @click="viewImages(scope.row.reachSenceeCarImgs)">查看图片
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="结算方式"
            width="70">
            <template slot-scope="scope">
              <span>{{scope.row.jsfs == '1' ? '现结' : (scope.row.jsfs == '0' ? '月结' : '')}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="金额"
            property="jsje"
            width="70">
          </el-table-column>
          <el-table-column
            label="状态"
            property="status"
            width="70">
          </el-table-column>
          <el-table-column label="操作" width="380">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-view"
                type="success"
                v-if="p1"
                @click="viewData(scope.$index, scope.row)">查看
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-view"
                type="success"
                v-if="p1"
                @click="preViewData(scope.$index, scope.row)">预览
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-download"
                v-if="p3"
                @click="handleExportPdf(scope.$index, scope.row)">导出
              </el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-close"
                v-if="p4"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="预览工单详情" :visible.sync="dialogFormVisible" top="1vh" width="70%">
      <div style="height:480px">
        <iframe :src="viewUrl"
                width="100%" height="100%" type="application/pdf"
                frameborder="no" border="0">

        </iframe>
      </div>
      <div slot="footer" class="dialog-footer" center>
        <!--<el-button type="primary" @click="handleTemplate">导出</el-button>-->
      </div>
    </el-dialog>
    <el-dialog title="现场图片" :visible.sync="dialogTupianFormVisible" top="5vh">
      <div style="height:300px">
        <div style="text-align: center" v-if="images.length == 0">暂无相关图片</div>
        <div v-for="(item,index) in  images" v-if="images.length != 0">
          <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
               @click="showImg(item.url,index)">
            <img :src="baseUrl+item.url"
                 style="width:100%;height:100%;"></img>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div style="text-align: center">
        <img :src="baseUrl+imgUrlaa" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="调整里程数" :visible.sync="dialogWorkOrderKmFormVisible" top="10vh" width="55%">
      <el-form :model="formWorkOrderKmData" style="margin-left: 150px">
        <el-form-item label="设到达现场里程数" :label-width="formLabelWidth">
          <el-input-number v-model="formWorkOrderKmData.reachKm" :precision="2" :step="1" :min="-1"></el-input-number>
        </el-form-item>
        <el-form-item label="到达目的地里程数" :label-width="formLabelWidth">
          <el-input-number v-model="formWorkOrderKmData.endKm" :precision="2" :step="1" :min="-1"></el-input-number>
        </el-form-item>
        <el-form-item label="返回里程数" :label-width="formLabelWidth">
          <el-input-number v-model="formWorkOrderKmData.returnKm" :precision="2" :step="1" :min="-1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUpdateWorkOrderKm">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看工单详情" :visible.sync="dialogViewFormVisible" top="1vh" width="70%">
      <el-row style="margin-bottom:10px">
        <el-col :span="7"><label>到达现场里程数：</label><span>{{reachKm}}</span><label>&nbsp;公里</label></el-col>
        <el-col :span="7"><label>到达目的地里程数：</label><span>{{endKm}}</span><label>&nbsp;公里</label></el-col>
        <el-col :span="7"><label>返回里程数：</label><span>{{returnKm}}</span><label>&nbsp;公里</label></el-col>
        <el-col :span="3">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="updateWorkOrderKm">调整
          </el-button>
        </el-col>
      </el-row>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="接单出发" name="0" v-loading="jiedanchufaLoading">
          <div v-for="item in jiedanchufa" v-if="jiedanchufa.length!=0">
            <el-tag color="#2b85e4" style="color:white;margin-bottom:20px;margin-top:10px" size="large">
              {{item.groupTitle}}
            </el-tag>
            <el-row>
              <el-col :span="8" v-for="item in item.items" style="margin-bottom:10px">
                <div v-if="item.itemType=='signature'">
                  <img :src="item.baseUrl+item.value" v-if="item.value!=null && item.value!=''" style="width:80%">
                  <div v-else>没有相关签名</div>
                </div>
                <div v-else><label>{{item.title}}：</label> {{item.value == null || item.value == '' ? '无' : item.value}}
                </div>
              </el-col>
            </el-row>
          </div>

        </el-collapse-item>
        <el-collapse-item title="接车出发" name="1" v-loading="jiechechufaLoading">
          <div v-if="jiechechufa.length!=0 && item.groupTitle!='服务协议'" v-for="item in jiechechufa">
            <el-tag color="#2b85e4" style="color:white;margin-bottom:20px;margin-top:10px" size="large">
              {{item.groupTitle}}
            </el-tag>
            <el-row>
              <el-col :span="item1.itemType=='vehiclestatu'?24:8" v-for="item1 in item.items" style="margin-bottom:10px"
                      v-if="item1.title!='接车出发拍照'">
                <div v-if="item1.itemType=='signature'">
                  <img :src="item1.baseUrl+item1.value" v-if="item1.value!=null && item1.value!=''" style="width:80%">
                  <div v-else>没有相关签名</div>
                </div>
                <div v-else-if="item1.itemType=='checkbox'">
                  <label
                    v-for="item2 in item1.selectItems">{{(item1.value != null && item1.value.indexOf(item2.id + '') != -1) ? item2.name + ' ' : ''}}</label>
                </div>
                <div v-else-if="item1.itemType=='select'">
                  <label>{{item1.title}}：</label><span
                  v-for="item2 in item1.range">{{(item1.value == item2.id + '') ? item2.name + ' ' : ''}}</span>
                </div>
                <div v-else-if="item1.itemType=='vehiclestatu'">
                  请在有损伤的部分画“○”，有划痕的部位画“-”
                  <img :src="carConditionUrl" v-if="carConditionUrl!=''">
                </div>
                <div v-else-if="item1.itemType=='radio'">
                  <label>{{item.groupTitle}}：</label> {{item1.value == null || item1.value == '' ? '无' : item1.value}}
                </div>
                <div v-else><label>{{item1.title}}：</label>
                  {{item1.value == null || item1.value == '' ? '无' : item1.value}}
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item title="到达目的地" name="2" v-loading="dadaomudidiLoading">
          <div v-if="dadaomudidi.length!=0" v-for="item in dadaomudidi">
            <el-tag color="#2b85e4" style="color:white;margin-bottom:20px;margin-top:10px" size="large">
              {{item.groupTitle}}
            </el-tag>
            <el-row>
              <el-col :span="8" v-for="item in item.items" style="margin-bottom:10px" v-if="item.title!='目的地拍照'">
                <div v-if="item.itemType=='signature'">
                  <img :src="item.baseUrl+item.value" v-if="item.value!=null && item.value!=''" style="width:80%">
                  <div v-else>没有相关签名</div>
                </div>
                <div v-else><label>{{item.title}}：</label> {{item.value == null || item.value == '' ? '无' : item.value}}
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item title="服务评价" name="3" v-loading="fuwupingjiaLoading">
          <div v-if="fuwupingjia.length!=0" v-for="item in fuwupingjia">
            <el-tag color="#2b85e4" style="color:white;margin-bottom:20px;margin-top:10px" size="large">
              {{item.groupTitle}}
            </el-tag>
            <el-row>
              <el-col :span="8" v-for="item in item.items" style="margin-bottom:10px">
                <div v-if="item.itemType=='signature'">
                  <img :src="item.baseUrl+item.value" v-if="item.value!=null && item.value!=''" style="width:80%">
                  <div v-else>没有相关签名</div>
                </div>
                <div v-else-if="item.title=='评分'"><label>{{item.title}}：</label>
                  {{item.value == null || item.value == '' ? '无' : item.value == 3 || item.value == 4 ? 4 - item.value : 5 - item.value}}
                </div>
                <div v-else><label>{{item.title}}：</label> {{item.value == null || item.value == '' ? '无' : item.value}}
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>

      <div slot="footer" class="dialog-footer" center>

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
</style>

<script>
  import electronicWorksheetsApi from '@/api/electronicWorksheetsApi'
  import onlineServiceCompanyApi from '@/api/onlineServiceCompanyApi'

  export default {
    created() {
      this.p = this.permissionValid.validAction(this.permissionValid.permissionRule.workOrder.listOperationWorkOrder)
      this.p1 = this.permissionValid.validAction(this.permissionValid.permissionRule.workOrder.workOrderOperationView)
      this.p2 = this.permissionValid.validAction(this.permissionValid.permissionRule.workOrder.exportExcel)
      this.p3 = this.permissionValid.validAction(this.permissionValid.permissionRule.workOrder.exportPdf)
      this.p4 = this.permissionValid.validAction(this.permissionValid.permissionRule.workOrder.removeOperationElectronicWorksheets)
      this.initData()
      this.listAllOnlineServiceCompany()
    },
    data() {
      return {
        formLabelWidth: '150px',
        formWorkOrderKmData: {
          reachKm: 0,
          endKm: 0,
          returnKm: 0
        },
        dialogWorkOrderKmFormVisible: false,
        baseUrl: process.env.IMG_BASE_URL,
        activeNames: ['0', '1', '2', '3'],
        dialogViewFormVisible: false,
        p: false,
        p1: false,
        p2: false,
        p3: false,
        p4: false,
        allOnlineData: [],
        value: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          orderNo: '',
          startTime: '',
          endTime: '',
          onlineCompanyId: '',
          rescueCompanyId: ''
        },
        multipleSelection: [],
        dialogFormVisible: false,
        viewUrl: '',
        imgUrl: [],
        images: [],
        dialogTupianFormVisible: false,
        dialogImgFormVisible: false,
        imgUrlaa: '',
        jiedanchufa: [],
        jiedanchufaLoading: true,
        jiechechufa: [],
        jiechechufaLoading: true,
        dadaomudidi: [],
        dadaomudidiLoading: true,
        fuwupingjia: [],
        fuwupingjiaLoading: true,
        carConditionUrl: '',
        ewId: '',
        reachKm: 0,
        endKm: 0,
        returnKm: 0
      }
    },
    methods: {
      updateWorkOrderKm() {
        this.formWorkOrderKmData.reachKm = this.reachKm
        this.formWorkOrderKmData.endKm = this.endKm
        this.formWorkOrderKmData.returnKm = this.returnKm
        this.dialogWorkOrderKmFormVisible = true
      },
      handleUpdateWorkOrderKm() {
        electronicWorksheetsApi.updateWorkOrderKm(this.ewId, this.formWorkOrderKmData, (res) => {
          this.$message({
            type: 'success',
            message: '调整成功!'
          })
          this.initData()
          this.dialogWorkOrderKmFormVisible = false
          this.reachKm = this.formWorkOrderKmData.reachKm
          this.endKm = this.formWorkOrderKmData.endKm
          this.returnKm = this.formWorkOrderKmData.returnKm
        }, () => {
        })
      },
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrlaa = url
      },
      viewImages(temImages) {
        this.imgUrl = []
        this.images = []
        if (temImages != null) {
          for (var uc of temImages) {
            this.imgUrl.push(uc.baseUrl + uc.url)
            this.images.push(uc)
          }
        }
        this.dialogTupianFormVisible = true
      },
      listAllOnlineServiceCompany() {
        onlineServiceCompanyApi.listAllOnlineServiceCompany((res) => {
          this.allOnlineData = res
        }, () => {
        })
      },
      dateTimeChange(value) {
        if (value != null) {
          this.tableSearchParam.startTime = value[0]
          this.tableSearchParam.endTime = value[1]
        } else {
          this.tableSearchParam.startTime = ''
          this.tableSearchParam.endTime = ''
        }
      },
      initData() {
        this.listTableData()
      },
      listTableData() {
        if (this.p) {
          electronicWorksheetsApi.listOperationWorkOrder(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
            this.tableData = res.list
            this.total = res.total
          }, () => {
          })
        } else {
          electronicWorksheetsApi.listElectronicWorksheets(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
            this.tableData = res.list
            this.total = res.total
          }, () => {
          })
        }
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.p) {
            electronicWorksheetsApi.deleteSingleOperationElectronicWorksheets(row.id, (res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initData()
            }, () => {
            })
          } else {
            electronicWorksheetsApi.deleteSingleElectronicWorksheets(row.id, (res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initData()
            }, () => {
            })
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.p) {
            electronicWorksheetsApi.removeOperationElectronicWorksheets(this.multipleSelection, (res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initData()
            }, () => {
            })
          } else {
            electronicWorksheetsApi.removeElectronicWorksheets(this.multipleSelection, (res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initData()
            }, () => {
            })
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      exportData() {
        if (this.p) {
          window.location.href = process.env.BASE_API + '/admin/worksheets/operation/export/excel?startTime=' + this.tableSearchParam.startTime + '&endTime=' + this.tableSearchParam.endTime + '&onlineCompanyId=' + this.tableSearchParam.onlineCompanyId + '&rescueCompanyId=' + this.tableSearchParam.rescueCompanyId + '&orderNo=' + this.tableSearchParam.orderNo
        } else {
          window.location.href = process.env.BASE_API + '/admin/worksheets/export/excel?startTime=' + this.tableSearchParam.startTime + '&endTime=' + this.tableSearchParam.endTime + '&onlineCompanyId=' + this.tableSearchParam.onlineCompanyId + '&orderNo=' + this.tableSearchParam.orderNo
        }

      },
      preViewData(index, row) {
        const loadings = this.$loading({
          lock: true,
          text: '拼命加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        if (this.p) {
          electronicWorksheetsApi.workOrderOperationView(row.id, (res) => {
            this.viewUrl = process.env.BASE_API + '/' + res + '?t=' + new Date().getTime()
            loadings.close()
            this.dialogFormVisible = true
          }, () => {
            loadings.close()
          })
        } else {
          electronicWorksheetsApi.workOrderView(row.id, (res) => {
            this.viewUrl = process.env.BASE_API + '/' + res + '?t=' + new Date().getTime()
            loadings.close()
            this.dialogFormVisible = true
          }, () => {
            loadings.close()
          })
        }
      },
      handleExportPdf(index, row) {
        if (this.p) {
          //const routeData = this.$router.resolve('https://www.baidu.com')
          window.open(process.env.BASE_API + '/admin/worksheets/operation/export/pdf/' + row.id, '_blank')
          //top.location.href = process.env.BASE_API + '/admin/worksheets/operation/export/pdf/' + row.id
        } else {
          //const routeData = this.$router.resolve('https://www.baidu.com')
          window.open(process.env.BASE_API + '/admin/worksheets/export/pdf/' + row.id, '_blank')
          //top.location.href = process.env.BASE_API + '/admin/worksheets/export/pdf/' + row.id
        }
      },
      viewData(index, row) {
        this.ewId = row.id
        this.reachKm = row.reachKm
        this.endKm = row.endKm
        this.returnKm = row.returnKm
        this.dialogViewFormVisible = true
        let param = {
          workOrderProcess: '0',
          workOrderId: row.id
        }
        this.jiedanchufaLoading = true
        electronicWorksheetsApi.generateWorkOrderForm(param, (res) => {
          this.jiedanchufa = res
          this.jiedanchufaLoading = false
        }, () => {
        })
        param = {
          workOrderProcess: '1',
          workOrderId: row.id
        }
        this.jiechechufaLoading = true
        let that = this
        electronicWorksheetsApi.generateWorkOrderForm(param, (res) => {
          that.jiechechufa = res
          electronicWorksheetsApi.initCarCondition(row.id, (res1) => {
            this.carConditionUrl = process.env.BASE_API + res1
            that.jiechechufaLoading = false
          }, () => {
          })

        }, () => {
        })


        param = {
          workOrderProcess: '2',
          workOrderId: row.id
        }
        this.dadaomudidiLoading = true
        electronicWorksheetsApi.generateWorkOrderForm(param, (res) => {
          this.dadaomudidi = res
          this.dadaomudidiLoading = false
        }, () => {
        })
        param = {
          workOrderProcess: '3',
          workOrderId: row.id
        }
        this.fuwupingjiaLoading = true
        electronicWorksheetsApi.generateWorkOrderForm(param, (res) => {
          this.fuwupingjia = res
          this.fuwupingjiaLoading = false
        }, () => {
        })
      }
    }
  }
</script>
